﻿
@{
    ViewData["Title"] = "LabelView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@* 手动标签查询 *@
<div class="layui-form-item">
    <div class="layui-input-inline">
        <input type="text" id="labelName" placeholder="标签名称" autocomplete="off" class="layui-input">
    </div>
    <button class="layui-btn" lay-submit lay-filter="demoTable" lay-event="myBtn">查询</button>
    <br />
    <button class="layui-btn AddLabel-btn" style="margin-top:10px">新增标签</button>
    <div>
    </div>
</div>
@* 显示手动标签 *@
<table class="layui-table" id="demoTable" lay-filter="demoTable">
   <p>手动标签</p>
    <tbody>
        <!-- 这里是动态生成的数据 -->
    </tbody>
</table>
@* 显示条件标签 *@
<table class="layui-table" id="conditionLabel" lay-filter="demoTable">
    <p style="margin-top:10px">条件标签</p>
    <tbody>
        <!-- 这里是动态生成的数据 -->
    </tbody>
</table>
<div id="demo-laypage-all"></div>
@* 手动标签 *@
<script type="text/html" id="bardemo">
    <a class="layui-btn layui-btn-xs layui-btn-action" lay-event="yourFunction">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-action" lay-event="deleteFunction">删除</a>
</script>
<div id="demo-laypage-layout-1"></div>
<script>
    layui.use(['table', 'upload', 'jquery', 'layer', 'form', 'laypage', 'element'], function () {

        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var laypage = layui.laypage;
        var element = layui.element;

        // 手动标签显示
        function show(labelName) {
            $.ajax({
                url: 'http://localhost:5174/api/Labels/GetLabelManual',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify({ labelName: labelName }),
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (res) {
                    table.render({
                        elem: '#demoTable',
                        data: res.data,
                        cols: [[
                            { field: 'labelId', title: '标签编号' },
                            { field: 'labelName', title: '标签名称' },
                            { toolbar: '#bardemo', title: '操作' }
                        ]],
                        // page: false
                    });
                },
                error: function (error) {
                    console.error(error);
                }
            });
        }

        // 条件标签显示
        function showcondition() {
            $.ajax({
                url: 'http://localhost:5174/api/Labels/GetLabelConditional',
                type: 'get',
                contentType: "application/json",
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (res) {
                    table.render({
                        elem: '#conditionLabel',
                        data: res.data,
                        cols: [[
                            { field: 'labelId', title: '标签编号' },
                            { field: 'labelName', title: '标签名称' },
                            { toolbar: '#bardemo', title: '操作' }
                        ]],
                        // page: false
                    });
                },
                error: function (error) {
                    console.error(error);
                }
            });
        }

        $('.AddLabel-btn').click(function () {
            window.location.href = 'AddLabelView';
        });


        // 立即调用
        show($("#labelName").val());
        showcondition();

        // 显示
        $(document).on('click', '[lay-event="myBtn"]', function () {
            var labelName = $("#labelName").val();
            console.log('Label Name:', labelName); // 调试信息
            show(labelName);
        });



        table.on('tool()', function (obj) {
            var id = obj.data.labelId;  // 这里获取到了对应按钮的 data-id 的值

            //删除功能
            if (obj.event === 'deleteFunction') {
                console.log("删除功能")
                // 接下来执行删除操作的代码，使用获取到的 id
                console.log(id)
                layer.confirm('确定删除吗？', { title: '提示' }, function (index) {
                    $.ajax({
                        url: 'http://localhost:5174/api/Labels/DelelteLabel',
                        type: 'post',
                        contentType: "application/json",
                        data: JSON.stringify({ labelId: id }),
                        headers: {
                            "Authorization": "Bearer " + localStorage.getItem('token')
                        },
                        async: true,
                        success: function (res) {
                            console.log(res);
                            if (res.code === 1) {
                                layer.msg('删除成功！', { icon: 1 });
                                show();
                                //showcondition();
                            } else {
                                layer.msg('删除失败！', { icon: 2 });
                            }
                        },
                        error: function (error) {
                            console.error(error);
                        }
                    });
                    layer.close(index);
                });


            }
            //编辑功能
            if (obj.event === 'yourFunction') {
                console.log("编辑功能")
                // 接下来执行编辑操作的代码，使用获取到的 id
                console.log(id)
                window.location.href = 'EditLabelView?labelId=' + id;
               
            }
        });

    });
</script>








































@* <div class="layui-form-item">
    <div class="layui-input-inline">
        <input type="text" id="labelName" placeholder="标签名称" autocomplete="off" class="layui-input">
    </div>
    <button class="layui-btn" lay-submit lay-filter="demoTable" lay-event="myBtn">查询</button>
    <button type="button" class="layui-btn layui-bg-blue">新增标签</button>
</div>
<table class="layui-table" id="manualLabel" lay-filter="demoTable">
    <p>手动标签</p>
    <tbody>
        <!-- 这里是动态生成的数据 -->
    </tbody>
</table>
<script type="text/html" id="buttonTemplate">
    <button class="layui-btn layui-btn-xs" onclick="editFunction()">编辑</button>
    <button class="layui-btn layui-btn-xs" onclick="AddRoomNumber()">下架</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteFunction()">删除</button>
</script>
<div id="demo-laypage-layout-1"></div>
<html>
<body>
    <script>
        layui.use(['table', 'jquery', 'layer', 'form', 'laypage'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var laypage = layui.laypage;
            var data = {
                labelName : $("#labelName").val()
            }


            function show() {
                $.ajax({
                    url: 'http://localhost:5174/api/Labels/GetLabelManual',
                    type: 'post',
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    async: true,
                    success: function (res) {
                        table.render({
                            elem: '#manualLabel',
                            data: res.data,
                            cols: [[
                                // { type: 'checkbox' },
                                { field: 'labelId', title: '标签编号' },
                                { field: 'labelName', title: '标签名称' },
                                // {
                                //     field: 'labelType', title: '标签类型', templet: function (d) {
                                //         // 根据数据中的某个条件使用三目运算符返回不同的值
                                //         return d.labelType == 1 ? '手动标签' : '条件标签';
                                //     }
                                // },
                                { toolbar: '#buttonTemplate', title: '操作' }
                            ]],
                            //page: true
                        });
                    },
                    error: function (error) {
                        console.error(error);

                    }
                })
            }

            show()
            $(document).on('click', '[lay-event="myBtn"]', function () {
                console.log("点击查询事件")
                var data = {
                    labelName: $("#labelName").val()
                }
                // 处理点击事件的逻辑
                $.ajax({
                    url: 'http://localhost:5174/api/Labels/GetLabelManual',
                    type: 'post',
                    contentType: "application/json",
                    data: JSON.stringify(data.labelName),
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    async: true,
                    success: function (res) {
                        table.render({
                            elem: '#manualLabel',
                            data: res.data,
                            cols: [[
                                // { type: 'checkbox' },
                                { field: 'labelId', title: '标签编号' },
                                { field: 'labelName', title: '标签名称' },
                                // {
                                //     field: 'labelType', title: '标签类型', templet: function (d) {
                                //         // 根据数据中的某个条件使用三目运算符返回不同的值
                                //         return d.labelType == 1 ? '手动标签' : '条件标签';
                                //     }
                                // },
                                { toolbar: '#buttonTemplate', title: '操作' }
                            ]],
                            //page: true
                        });
                    },
                    error: function (error) {
                        console.error(error);

                    }
                })
            });

            // 分页组件初始化
            //自定义排版
        });
    </script>

</body>
</html> *@


